<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<c:set var="ctx" value="${pageContext.request.contextPath}" />

<link rel="stylesheet" href="${ctx}/js/summernote/summernote.css">
<link rel="stylesheet"
	href="${ctx}/js/webuploader-0.1.5/webuploader.css">

<!-- summernote 编辑器插件 -->
<script src="${ctx}/js/summernote/summernote.js"></script>
<script src="${ctx}/js/summernote/lang/summernote-zh-CN.js"></script>

<script type="text/javascript"
	src="${ctx}/js/system/producttree/editFormUI.js"></script>

<!-- 图片上传  -->
<script type="text/javascript"
	src="${ctx}/js/webuploader-0.1.5/webuploader.js"></script>

<div class="layer_material">
	<form id="form" name="form" class="form-horizontal" method="post"
		action="http://localhost:8080/hewke-con/producttree/editForm.shtml">
		<input type="hidden" name="token" value="${token}" /> <input
			type="hidden" name="formMap_id" value="${formMap.id}" />
		<ul>
			<li class="clearfix"><label class="text">产品名称：</label> <input
				class="form-control" name="name" placeholder="请输入产品名称" type="text"
				value="${formMap.name}"></li>
			<li class="clearfix"><label class="text">产品编号：</label> <input
				class="form-control" name="code" placeholder="请输入产品编号" type="text"
				value="${formMap.code}"></li>
			<li class="clearfix"><label class="text">产品类型：</label> <input
				class="form-control" name="type" placeholder="请输入产品类型" type="text"
				value="默认选择" readonly="readonly"></li>
			<li class="clearfix"><label class="text">产品分组：</label> <input
				class="form-control" name="func_group" placeholder="请输入产品分组"
				type="text" value="默认选择" readonly="readonly"></li>


			<li class="clearfix"><label class="text">产品规格：</label>
				<div class="area_center" name="standard">
					<table
						class="table table-striped table-bordered table-advance table-hover">
						<thead>
							<tr>
								<th>规格</th>
								<th class="hidden-xs">规格值</th>
								<th>价格（元）</th>
								<th>库存</th>
							</tr>
						</thead>
						
						<tbody>
							<c:forEach items="${formMap.childList}" var="list">
								<tr ids="${list.id}">
									<td class="highlight"><input type="text" maxlength='10'
										name="specifications" value="${list.specification}"></td>
									<td class="hidden-xs"><input type="text" maxlength='10'
										name="spec_values" value="${list.spec_value}"></td>
									<td><input type="text" maxlength='10' name="prices"
										value="${list.price}"></td>
									<td><input type="text" maxlength='10' name="stocks"
										value="${list.stock}"></td>
								</tr>
							</c:forEach>
						</tbody>
					</table>
					<a class="fa fa-plus-square" href="javascript:;" title="添加条目"></a>
				</div></li>
			<li class="clearfix"><label class="text" style="width: 100%;">产品图片：最多上传7个图片,图片大小不能超过1M.只上传选中图片，多个上传时选中多个。</label>
				<div class="area_center" name="baner" id="uploader">
					<!--用来存放item-->
					<div id="filePicker">选择图片</div>
					<div id="fileList" class="uploader-list clearfix">
						<c:forEach items="${formMap.file_streamList}" var="list" varStatus="status">
							<div id="${formMap.file_idList.get(status.index)}" class="file-item thumbnail">
								<img src="${list} ">
								<div class="info">图 ${status.index} </div>
								<a href="javascript:;" class="fa fa-times-circle"></a>
							</div>
						</c:forEach>
					</div>
				</div></li>
			<li class="clearfix"><label class="text">产品描述：</label>
				<div class="area_center" name="description">
					<div id="editor"></div>
				</div>
			</li>
		</ul>
	</form>
</div>
<script>
	var uploader;
	var formMap = '${formMap}';
	var keyList = '${formMap.file_streamList}';
	var remark = '${formMap.remark}';
	
	$('#editor').summernote({
		height : 300,
		lang : "zh-CN",
		minHeight : 300,
		dialogsFade : true,// Add fade effect on dialogs
		dialogsInBody : true,// Dialogs can be placed in body, not in
		disableDragAndDrop : false
	});


	//赋值
	$('#editor').summernote('code', remark);

	$(".fa-plus-square").click(function() {
		var trs = $(this).siblings("table").find("tbody tr");
		if (trs.length > 5)
			return;
		var tr = '<tr><td class="highlight"><input type="text" maxlength="10" name="specifications"></td><td class="hidden-xs"> <input type="text" maxlength="10" name="spec_values"> </td><td> <input type="text" maxlength="10" name="prices"></td><td><input type="text" maxlength="10" name="stocks"></td></tr>';
		$(this).siblings("table").find("tbody").append(tr)
	})

	// 图片展示区域
	var $list = $("#fileList");

	// 图片宽高
	var ratio = window.devicePixelRatio || 1, thumbnailWidth = 200 * ratio, thumbnailHeight = 100 * ratio;
	function uploaderFile(nums){
		uploader = WebUploader.create({
			auto : false, // 选完文件后，是否自动上传。
			swf : '${ctx}/js/Uploader.swf',// swf文件路径
			// server: 'http://webuploader.duapp.com/server/fileupload.php', // 文件接收服务端。
			pick : '#filePicker',// 选择文件的按钮。可选。 内部根据当前运行是创建，可能是input元素，也可能是flash.
			fileSingleSizeLimit : 1024 * 1024 * 2, //验证单个文件大小是否超出限制, 超出则不允许加入队列。
			fileNumLimit : nums,//验证文件总数量, 超出则不允许加入队列。
			// 只允许选择图片文件。
			accept : {
				title : 'Images',
				extensions : 'gif,jpg,png',
				mimeTypes : 'image/*'
			}
		});
		// 图片添加进来时，进行展示
		uploader.on('fileQueued', function(file) {
			// 图片展示区域布局
			var $li = $('<div id="' + file.id + '" class="file-item thumbnail">'
					+ '<img>' + '<div class="info">' + file.name + '</div>'
					+ '<a href="javascript:;" class="fa fa-times-circle"></a>'
					+ '</div>'), $img = $li.find('img');
	 		$list.append($li);
			// 创建缩略图
			// 如果为非图片文件，可以不用调用此方法。
			// thumbnailWidth x thumbnailHeight 为 100 x 100
			uploader.makeThumb(file, function(error, src) {
				if (error) {
					$img.replaceWith('<span>不能预览</span>');
					return;
				}
				$img.attr('src', src);
			}, thumbnailWidth, thumbnailHeight);
			$li.on('click', '.fa-times-circle', function() {
				$(this).parent().remove();
				uploader.removeFile(file, true);
			})
		});
	}
	// 初始化Web Uploader
	uploaderFile(7);
	$("#fileList").on("click",'.fa-times-circle',function(){
		var nums = 9 - $(".thumbnail").length;
		uploader.destroy();// 摧毁上传实例
		uploaderFile(nums);// 重新调用上传预览
		$(this).parent().remove();
	})
	//uploader.destroy();
</script>